import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { messageListDefaultProps } from './defaultProps';
import type { MessageListOptions } from './type';

export interface MessageListProps extends MessageListOptions, HTMLAttributes<HTMLElement> {}

const MessageList: FC<MessageListProps> = (props) => {
  const { className, as, children, forwardedRef, ...messageListProps } = props;

  return createElement(
    as!,
    { ref: forwardedRef, className: classNames('list', className), ...messageListProps },
    children,
  );
};

MessageList.displayName = 'MessageList';
MessageList.defaultProps = messageListDefaultProps;

export default MessageList;
